
<template>
  <van-nav-bar title="VueShop" />

  <van-tree-select v-model:main-active-index="active" height="100vh" :items="items" @click-nav="OnList">
    <template #content>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
        </van-list>
        </van-pull-refresh>
      <van-card
        price="2.00"
        desc="商品描述信息"
        title="商品标题"
        thumb="/assets/images/6.jpg"
      >
        <template #num>
          <van-button size="mini" @click="ProductInfo">查看详情</van-button>
        </template>
      </van-card>
    </template>
  </van-tree-select>

  <Tabbar />
</template>

<script setup>

import { onMounted } from 'vue';

    const {proxy} = getCurrentInstance()

    let business = proxy.$business;

    let list = ref([]) //数据列表

    let active = ref('0')
    // console.log(active)
    let items = reactive([])
    // console.log(items)
    //刷新状态
    let refreshing = ref(false)

    //加载状态
    let loading = ref(false)

    //是否无更多数据
    let finished = ref(false)

    //当前页
    let page = ref(1)

    const onRefresh = async () => {
        // console.log('下拉刷新')
        //重置当前页
        page.value = 1
        //重置列表数据
        list.value = []
        //重置加载状态
        loading.value = true
        //重置加载完成状态
        finished.value = false
        //重新获取数据
        onLoad()
    }

    onMounted(() => {
        ProductList()

        onRefresh()
    })

    const ProductList = async() => 
    {
        var result = await proxy.$POST({
            url:'/product/type',
        })

        if(result.code == 0)
        {
            proxy.$fail(result.msg)
            return false
        }
        // console.log(result)

        result.data.map(item => {
            // console.log(item)
            items.push({text:item.name,active:item.id})
        })
        console.log(items)

    
    }
    const OnList = async (index) =>
    {
        // console.log(index)
        // return false
        refreshing.value = true
        active.value = items[index].active
        // console.log(active.value)
        onRefresh()
    }

    const onLoad = async () => {

        //判断是否为加载中的状态
        if(refreshing.value)
        {
        refreshing.value = false
        }

        // return false
        var params = {
            busid:business.value.id,
            activeid:active.value,
            page:page.value,
        }
        // console.log(params)
        // return false
        var result = await proxy.$POST({
            url:'product/typelist',
            params,
        })

        //请求发送完毕后，加载状态也就完毕了
        loading.value = false
        // console.log(result)
        // return false
        //没有更多数据
        if(result.code == 0)
        {
            //如果没有更多数据了 就说明已经加载到底了....
            finished.value = true
            return
        }
    }

    

    

  const ProductInfo = () => proxy.$router.push('/product/info')
</script>